<template>
  <el-aside class="side">
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        text-color="#fff"
        @select="handleMenuSelect"
        :default-active="currentRoute"
    >
    <el-menu-item index="1">
      <el-icon><location /></el-icon>
      <span>教练管理</span>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><User /></el-icon>
      <span>APP学员管理</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><document /></el-icon>
      <span>激活码设置</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <span>退出系统</span>
    </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';
const router = useRouter();
const route = useRoute();


const routeToIndexMap = {
  '/Coach': '1',
  '/Students': '2',
  '/Activation': '3',
  '/Quit': '4'
};


const currentRoute = computed(() => {
  return routeToIndexMap[route.path] || '1';
});

const handleMenuSelect = (index) => {
  const routeMap = {
    '1': '/Coach',
    '2': '/Students',
    '3': '/Activation',
    '4': '/Quit'
  };
  const targetRoute = routeMap[index];
  if (targetRoute) {
    router.push(targetRoute);
  }
};
</script>

<style scoped>
.side {
  height: 100%;
  width: 220px;
  background-color: #545c64;
  overflow: hidden;
}
.el-menu-vertical-demo {
  width: 230px;
}
</style>